<template>
  <div>
      <!-- 面包屑导航 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
     </el-breadcrumb>
     <el-card class="box-card">
         <el-row>
             <el-col>
                 <el-button type="primary" @click="getParentCateList">添加分类</el-button>
             </el-col>
         </el-row>
         <!-- 表格 -->
         <tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index border>
             <!-- 是否有效 -->
             <template slot="isok" slot-scope="scope">
                <i class="el-icon-success" v-if="scope.row.cat_deleted===false"
                    style="color:lightgreen"
                ></i>
                <i class="el-icon-error" v-else style="color:lightred"></i>
             </template>
             <!-- 排序 -->
             <template slot="order" slot-scope="scope">
                 <el-tag size="mini" v-if="scope.row.cat_level==0">一级</el-tag>
                 <el-tag type="success" size="mini" v-else-if="scope.row.cat_level==1">二级</el-tag>
                 <el-tag type="warning" size="mini" v-else-if="scope.row.cat_level==2">三级</el-tag>
             </template>
             <!-- 操作 -->
             <template slot="opt">
                    <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
             </template>
         </tree-table>
         <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum" 
            :page-sizes="[3, 4, 5, 6]"
            :page-size="queryInfo.pagesize"
             layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
     </el-card>
     <!-- 添加分类对话框 -->
     <el-dialog title="添加分类" :visible.sync="dialogVisible" width="50%" @close="colseDialog">
        <el-form ref="addCateFormRef" :model="addCateForm" label-width="100px" :rules="rules">
            <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类">
                <el-cascader expand-trigger="hover" v-model="selectedKeys" :options="parentCateList" :props="cateProps"
                @change="parentCateChange" clearable ></el-cascader>
            </el-form-item>
        </el-form>    
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="cataFrom">确 定</el-button>
        </span>
</el-dialog>
  </div>
</template>

<script>
export default {
    data () {
        return {
            // 查询条件
          queryInfo:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            // 添加分类表单
            dialogVisible:false,
            // 商品分类的数据列表，默认为空
          catelist:[],
            // 总数据条数
          total:0,
        //  添加分类的表单数据对象
          addCateForm: {
            //   将要添加的分类名称
            cat_name:'',
            // 父级分类的id
            cat_pid:0,
            // 分类的等级
            cat_level:0
          },
        // 父级分类的列表
          parentCateList:[],
          //   级联选择器相关配置
          cateProps: {
            value:'cat_id',
            label:'cat_name',
            children:'children',
            checkStrictly: true
          },
          //  级联选择器选中的id
          selectedKeys:[],
          //为table指定列的定义   
          columns:[{
              label:'分类名称',
              prop:'cat_name'
          },
            {
            label: '是否有效',
            // 表示将当前列定义为模板列
            type: 'template',
            // 表示当前这一例的模板名称
            template: 'isok',
          },
          {
            label: '排序',
            // 表示将当前列定义为模板列
            type: 'template',
            // 表示当前这一例的模板名称
            template: 'order',
          },
          {
            label: '操作',
            // 表示将当前列定义为模板列
            type: 'template',
            // 表示当前这一例的模板名称
            template: 'opt',
          }],
        //   验证规则
          rules:{
             cat_name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' }]
          }  
        }
    },
    created () {
        this.goodList();
    },
    methods: {
        async goodList() {
            var {data:res}=await this.$http.get('categories',{
                params:this.queryInfo
            })
            if(res.meta.status==200) {
                this.$message.success(res.meta.msg);
                this.catelist=res.data.result;
                // 为总数据条数赋值
                this.total=res.data.total;
            }else{
                this.$message.success(res.meta.msg);
            }
        },
        // 监听pagesize改变
        handleSizeChange(newSize) {
            this.queryInfo.pagesize=newSize;
            this.goodList();
        },
        // 监听页码发生改变
        handleCurrentChange(newCurrent) {
            this.queryInfo.pagenum=newCurrent;
            this.goodList();
        },
        // 获取父级分类列表
        async getParentCateList() {
            var {data:res}=await this.$http.get('categories',{
                params:{
                    type: 2
                }
            });
            console.log(res);
            if(res.meta.status==200) {
                this.$message.success(res.meta.msg);
                this.parentCateList=res.data;
                this.dialogVisible=true;
            }
            else {
                this.$message.error(res.meta.msg);
            }
        },
        parentCateChange() {
            console.log(this.selectedKeys);
            // 若果selectedKeys里面没有元素这说明是一级
            if(this.selectedKeys.length>0) {
                // 当前父级的id
                this.addCateForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1];
                // 当前分类的等级赋值
                this.addCateForm.cat_level=this.selectedKeys.length
                return ;
            }
            else {
                this.addCateForm.cat_pid=0;
                this.addCateForm.cat_level=0;
            }
        },
        // 点击确定按钮，添加新的分类
        cataFrom() {
            this.$refs.addCateFormRef.validate(async(valid) => {
               if(valid) {
                   var {data:res}=await this.$http.post('categories',this.addCateForm);
                   if(res.meta.status==200) {
                       this.$message.success(res.meta.msg);
                       this.goodList();
                   }
                   else {
                       this.$message.success(res.meta.msg);
                   }
               }else {
                   console.log('error submit!!');
                   return false;
               }
            });
            this.dialogVisible = false;
        },
        // 监听对话框关闭事件，重置表单数据
        colseDialog() {
            this.$refs.addCateFormRef.resetFields();
            this.selectedKeys=[];
            this.addCateForm.cat_level=0;
            this.addCateForm.cat_pid=0;
        }
    }
}
</script>

<style lang="less" scoped>
.el-row {
    margin-bottom: 15px;
}
.el-pagination {
    margin-top: 15px;
}
.el-cascader {
    width: 100%;
}
</style>